import { app } from "../../scripts/app.js";
import { api } from "../../scripts/api.js";
import { ComfyDialog, $el } from "../../scripts/ui.js";
import { ComfySettingsDialog } from "../../scripts/ui/settings.js";
import { Story } from "./story.js";

window.__CONTAINER_LIST__ = {
    userID: "536891193569405430",
};
class ZbqNode {
    constructor() {
        this.layoutHtml();
    }
    
    // 拖拽
    dragElement(dragEl, settings) {
        var posDiffX = 0,
            posDiffY = 0,
            posStartX = 0,
            posStartY = 0,
            newPosX = 0,
            newPosY = 0;
        if (dragEl.getElementsByClassName("drag-handle")[0]) {
            // if present, the handle is where you move the DIV from:
            dragEl.getElementsByClassName("drag-handle")[0].onmousedown = dragMouseDown;
        } else {
            // otherwise, move the DIV from anywhere inside the DIV:
            dragEl.onmousedown = dragMouseDown;
        }

        // When the element resizes (e.g. view queue) ensure it is still in the windows bounds
        const resizeObserver = new ResizeObserver(() => {
            ensureInBounds();
        }).observe(dragEl);

        function ensureInBounds() {
            if (dragEl.classList.contains("comfy-menu-manual-pos")) {
                newPosX = Math.min(document.body.clientWidth - dragEl.clientWidth, Math.max(0, dragEl.offsetLeft));
                newPosY = Math.min(document.body.clientHeight - dragEl.clientHeight, Math.max(0, dragEl.offsetTop));

                positionElement();
            }
        }

        function positionElement() {
            const halfWidth = document.body.clientWidth / 2;
            const anchorRight = newPosX + dragEl.clientWidth / 2 > halfWidth;

            // set the element's new position:
            if (anchorRight) {
                dragEl.style.left = "unset";
                dragEl.style.right = document.body.clientWidth - newPosX - dragEl.clientWidth + "px";
            } else {
                dragEl.style.left = newPosX + "px";
                dragEl.style.right = "unset";
            }

            dragEl.style.top = newPosY + "px";
            dragEl.style.bottom = "unset";

            if (savePos) {
                localStorage.setItem(
                    "Comfy.MenuPosition",
                    JSON.stringify({
                        x: dragEl.offsetLeft,
                        y: dragEl.offsetTop,
                    })
                );
            }
        }

        function restorePos() {
            let pos = localStorage.getItem("Comfy.MenuPosition");
            if (pos) {
                pos = JSON.parse(pos);
                newPosX = pos.x;
                newPosY = pos.y;
                positionElement();
                ensureInBounds();
            }
        }

        let savePos = undefined;
        settings.addSetting({
            id: "Comfy.MenuPosition",
            name: "Save menu position",
            type: "boolean",
            defaultValue: savePos,
            onChange(value) {
                if (savePos === undefined && value) {
                    restorePos();
                }
                savePos = value;
            },
        });

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            // get the mouse cursor position at startup:
            posStartX = e.clientX;
            posStartY = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();

            dragEl.classList.add("comfy-menu-manual-pos");

            // calculate the new cursor position:
            posDiffX = e.clientX - posStartX;
            posDiffY = e.clientY - posStartY;
            posStartX = e.clientX;
            posStartY = e.clientY;

            newPosX = Math.min(document.body.clientWidth - dragEl.clientWidth, Math.max(0, dragEl.offsetLeft + posDiffX));
            newPosY = Math.min(document.body.clientHeight - dragEl.clientHeight, Math.max(0, dragEl.offsetTop + posDiffY));

            positionElement();
        }

        window.addEventListener("resize", () => {
            ensureInBounds();
        });

        function closeDragElement() {
            // stop moving when mouse button is released:
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

    layoutHtml() {
        // css
        this.settings = new ComfySettingsDialog(app);
        $el("style", {
            textContent: `
            .zbq-container{
                position:absolute;
                display:flex;
                right:500px;
                top:5px;
                background-color:#ccc;
                color: #000;
            }
            `,
            parent: document.body,
        });
        var content = ``;
        var container = $el("div.zbq-container", {
            parent: document.querySelector('body'),
            innerHTML: content
        });
        new Story(container);
        // 拖拽
        // this.dragElement(container, this.settings);
    }


}

app.registerExtension({
    name: "Comfy.testNode",
    async setup() {
        new ZbqNode();
        /* $el("button", {
            parent: document.querySelector(".comfy-menu"),
            textContent: "测试",
            style: { order: 3 },
            onclick: () => {
                alert(22222222222);
            },
        }); */
    },
});
